
<form id="displayLayerProgress_plugin_settings" class="form-horizontal" >
    <div class="tabbable"> <!-- Only required for left/right tabs -->
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tabDisplay" data-toggle="tab">Display</a></li>
            <li><a href="#tabLayer" data-toggle="tab">Layer</a></li>
            <li><a href="#tabHeight" data-toggle="tab">Height</a></li>
            <li><a href="#tabANETE10" data-toggle="tab">ANET E10</a></li>
            <li><a href="#tabDebugging" data-toggle="tab">Debugging</a></li>
        </ul>
        <div class="tab-content">
            <!-- DISPLAY - TAB -->
            <div class="tab-pane active" id="tabDisplay">
                <div class="control-group">
                    <legend>Visibility</legend>
                    <label class="checkbox">Show printer display on Desktop
                        <input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.showAllPrinterMessages" />
                    </label>
                    <label style="padding-left:21px">Every <code>M117 - Message</code> which is send to the printer, will also shown in a Desktop-PopUp</label>

                    <div>
                        <label class="checkbox">Screen location: (<a target="newTab" href="https://github.com/sciactive/pnotify/tree/2.1.0#example-stacks">description</a>):
                        <input type="text" class="input-block-level text-left"
                                                     data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.printerDisplayScreenLocation"/></label>
                    </div>
                    <div>
                        <label class="checkbox">Width:
                            <input type="text" class="input-block-level text-left"
                                   data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.printerDisplayWidth"/></label>
                    </div>
<!--                    <div >-->
<!--                        <label class="checkbox">Show current height in Statusbar-->
<!--                            <input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.showHeightInStatusBar">-->
<!--                        </label>-->
<!--                    </div>-->

<!--                    <div >-->
<!--                        <label class="checkbox">Show layer information in Statusbar-->
<!--                            <input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.showLayerInStatusBar">-->
<!--                        </label>-->
<!--                    </div>-->

                    <div >
                        <label class="checkbox">Update Printer Display only while printing
                            <input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.updatePrinterDisplayWhilePrinting">
                        </label>
                    </div>

                </div>

                <div class="control-group">
                    <legend>Message output</legend>
                    <div>You can define where you want to display the layer- and progress-information and also how the message
                        should be shown. For font-color change in Navigationbar, see <a target="_newTab" href="https://github.com/OllisGit/OctoPrint-DisplayLayerProgress/issues/62#issuecomment-442627397">Issue#62</a>
                    </div>
                    <br/>
                    <div>
                        Use the following keywords as a placeholder:
                        <code>[progress], [current_layer], [total_layers], [estimated_end_time], [printtime_left], <br/>
                            [current_height], [total_height],<br/>
                            [feedrate], [feedrate_g0], [feedrate_g1], [fanspeed] <br/>
                            [last_layer_duration], [average_layer_duration] <br/>
                            [changefilamenttime_left], [estimated_changefilament_time], [changefilament_count]
                        </code>
                    </div>
<br>
<div class="control-group" >
    <label class="checkbox">State<input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.showOnState"/></label>
    <textarea rows="5" cols="60" style="min-width: 96%" data-bind="enable: settingsViewModel.settings.plugins.DisplayLayerProgress.showOnState, value: settingsViewModel.settings.plugins.DisplayLayerProgress.stateMessagePattern">'State-Pattern'</textarea>
</div>

<div class="control-group" >
    <label class="checkbox">{{ _('Navigationbar') }}<input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.showOnNavBar"/></label>
    <textarea rows="5" cols="60" style="min-width: 96%" data-bind="enable: settingsViewModel.settings.plugins.DisplayLayerProgress.showOnNavBar, value: settingsViewModel.settings.plugins.DisplayLayerProgress.navBarMessagePattern">'NavBar-Pattern'</textarea>
</div>

<div class="control-group" >
    <label class="checkbox">{{ _('Printer Display') }}<input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.showOnPrinterDisplay"/></label>
    <input type="text" class="input-block-level text-left" data-bind="enable: settingsViewModel.settings.plugins.DisplayLayerProgress.showOnPrinterDisplay, value: settingsViewModel.settings.plugins.DisplayLayerProgress.printerDisplayMessagePattern"/>
</div>

<div class="control-group" >
    <label class="checkbox">Browser-Title<input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.showOnBrowserTitle"/></label>
    <input type="text" class="input-block-level text-left" data-bind="enable: settingsViewModel.settings.plugins.DisplayLayerProgress.showOnBrowserTitle, value: settingsViewModel.settings.plugins.DisplayLayerProgress.browserTitleMessagePattern"/>
    <label class="radio">
        <input type="radio" name="browserTitleMode" value="overwrite" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.browserTitleMode"> Overwrite title
    </label>
    <label class="radio">
        <input type="radio" name="browserTitleMode" value="append" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.browserTitleMode"> Append title
    </label>
</div>


<div class="control-group">
    <label class="control-label" >Feedrate factor</label>
    <div style="float: right;">
        <input type="text" class="text-right" data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.feedrateFactor"/>
        &nbsp;format*&nbsp;<input type="text" class="text-right" data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.feedrateFormat"/>
    </div>
</div>

<div class="control-group">
    <label class="control-label" >Layer count for average layer duration</label>
    <div style="float: right;">
        <input type="text" class="text-right" data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.layerAverageDurationCount"/>
        &nbsp;format*&nbsp;<input type="text" class="text-right" data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.layerAverageFormatPattern"/>
    </div>
</div>

<div class="control-group">
    <label class="control-label" >Height format*</label>
    <div style="float: right;">
        <input type="text" class="text-right" data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.heightFormat"/>
    </div>
</div>

<div class="control-group">
    <label class="control-label" >Time format (e.g. use %I:%M for 12 Hours)*</label>
    <div style="float: right;">
        <input type="text" class="text-right" data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.etaFormat"/>
    </div>
</div>

<div class="control-group">
    <label class="control-label">&nbsp;</label>
    <div class="controls">
        <p style="float: right;">*Format pattern: Date-Format look <a target="_newTab" href="https://stackoverflow.com/questions/538666/python-format-timedelta-to-string#42320260">here</a> and <a target="_newTab" href="https://www.programiz.com/python-programming/datetime/strftime#format-code">here</a>. Number-Format look <a target="_newTab" href="https://trinket.io/python/1f22413094">here</a></p>
    </div>
</div>

                    <div class="help-block">
                        <font color="red">Before changing the printer message, please make sure that your printer can handle the
                            output. <br/>
                            To test it, send the following message example G-Code (via terminal) to your printer:<br/>
                            <br/>
                            <code>M117 xxx% L=xxx/xxx H=xxx.xx/xxx.xx</code>
                            <br/><br/>
                            !!! Some printers ignores the overlapping characters or special chars (e.g. :) and some
                            <b><i>stops</i></b> working !!!
                        </font>
                    </div>
                </div>

                <div class="control-group">
                    <legend>Communication</legend>
                    <label class="checkbox">Enable WebSocket-Communication<input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.sendLayerInformationsViaWebSocket"/></label>
                    <label style="padding-left:21px">Enabling this flag allows other Clients (like OctoPod) or Plugins to read the above mentions values via WebSocket. If not needed, disable it to reduce network traffic.</label>
                    <br/>
                </div>

            </div>
            <!-- LAYER - TAB -->
            <div class="tab-pane" id="tabLayer">


                <div class="control-group">
                    <legend>Layer indicator</legend>

                    <label class="checkbox">Add Layer-Indicators during upload
                        <input type="checkbox" data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.addLayerIndicators" />
                    </label>
                    <label style="padding-left:21px">
                        Every Slicer use a different format to put the layer-information into the G-Code.<br/><br/>
                        If you activate this checkbox, the plugin looks for below layer-expressions and adds a "neutral" M117-command (e.g. <code>M117 INDICATOR-Layer45</code>) into the uploaded G-Code.<br/>
                        During print this M117-command will be replaced with the print message you defined.<br/><br/>
                        If you deactivate this checkbox, your slicer needs to provide the above M117 indicator commands.<br/>
                        This is helpfull if you use large files (>50MB) or if you use a mounted filesystem (e.g. NAS) instead of uploading files via UI.
                    </label>


                    <div>
                        Here you can define several regular expressions for different slicers. If you need help with regular expressions, try <a href="https://regex101.com/">https://regex101.com/</a><br/>
                        The pattern of the expression is:<code>groupIndex [layerExpression] comment</code><br/>
                        E.g. <code>1		[;LAYER:([0-9]+).*]		CURA</code><br/>
                        <i>groupIndex</i>  is the index of the expression where you can find the layer-value (see round brackets)<br/>
                        or you can use <code>count</code>, if the layer-value needs to be calculatetd by the plugin (e.g. KISSlicer).
                    </div>
                    <br/>
                    <textarea id="layerExpressionTextArea" rows="5" style="width:90%"  data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.layerExpressions, enable: settingsViewModel.settings.plugins.DisplayLayerProgress.addLayerIndicators">
1		[;LAYER:([0-9]+).*]		CURA
1		[; layer ([0-9]+),.*]	Simplify3D
count	[; BEGIN_LAYER_OBJECT.*]	KISSlicer
empty
empty
                    </textarea>
                    <div class="help-block">
                        <font color="red">After changing the layer-expression you need to upload your model again!</font>
                        <br/>
                    </div>
                </div>

                <div class="control-group">
                    <legend>Layer offset</legend>
                    <div>
                        Some slicers start at layer zero (like CURA) and some starts at layer one.<br/>
                        Here you can add an offset to the layer count.
                    </div>
                    <label class="control-label">Add layer offset:</label>
                    <div class="controls">
                        <span class="input-append">
                            <input type="number" step="any" min="0" class="input-mini text-right"
                                   data-bind="value: settingsViewModel.settings.plugins.DisplayLayerProgress.layerOffset">
                            <span class="add-on">layers</span>
                        </span>
                    </div>
                </div>
            </div>
            <!-- HEIGHT - TAB -->
            <div class="tab-pane" id="tabHeight">
                <div class="control-group">
                    <label class="control-label">Choose total height method:</label>
                    <div class="controls">
                        <input type="radio" name="heightMethode" value="zMax"
                               data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.totalHeightMethode"/>&nbsp;&nbsp;Max
                        Z-Value in G-Code<br/>
                        <input type="radio" name="heightMethode" value="zExtrusion"
                               data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.totalHeightMethode"/>&nbsp;&nbsp;Max
                        Z-Value with Extrusion on Z-Layer<br/>
                        <input type="radio" name="heightMethode" value="zExpression"
                               data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.totalHeightMethode"/>&nbsp;&nbsp;Max
                        Z-Value from expression<br/>
                        <input type="text" name="zMaxExpressionValue" data-bind="enable: settingsViewModel.settings.plugins.DisplayLayerProgress.totalHeightMethode()=='zExpression',
                                                                                 value: settingsViewModel.settings.plugins.DisplayLayerProgress.zMaxExpressionPattern"  />
                    </div>
                </div>
                <p>
    <!-- TODO Description -->
                </p>
            </div>

            <!-- ANET E-10 - TAB -->
            <div class="tab-pane" id="tabANETE10">
                <div class="control-group">
                    <label class="control-label">{{ _('Add trailing character') }}&nbsp;&nbsp;&nbsp;<input type="checkbox"
                                                                                                           data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.addTrailingChar"></label>
                </div>
                <p>
                    {{ _('Use this if your printer display cuts off the last character of the layer message.') }}
                </p>
            </div>

            <!-- DEBUGGING - TAB -->
            <div class="tab-pane" id="tabDebugging">
                <div class="control-group">
                    <label class="control-label">Event debugging enabled&nbsp;&nbsp;&nbsp;<input type="checkbox"
                                                                                                           data-bind="checked: settingsViewModel.settings.plugins.DisplayLayerProgress.debuggingEnabled"></label>
                </div>
                <p>
                    Enabled Event and G-Code logging. If enabled you can download the log-file from the logging-section ('plugin_DisplayLayerProgress_events.log')
                </p>
            </div>

        </div>
    </div>
</form>

